<!-- 新增地址 -->
<template>
	<view class="add_box">
		<view class="add_content">
			<view class="add_card" v-for="(item ,index) in list" :key="index">
				<view class="card_left">
					<view class="card_left1">
						<view class="card_name">用户ID</view>
						<view class="card_phone">{{item.phone}}</view>
					</view>
					<view class="card_left2">
						<view class="card_type" v-if="item.show">默认</view>
						<view class="card_place" :class="{'change_card':!item.show}">{{item.address}}</view>
					</view>
				</view>
				<view class="card_right" @click="jumpEdit(item, index)">
					<image src="/static/img/common_ic_08.png"></image>
				</view>
				<view class="add_bottom">
					<view class="bottom_text" @click="jumpNew()">新增地址</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				userlist: [],
				edit_url: "/pages/user/address/edit/index",
				add_url: "/pages/user/address/add/index"
			}

		},
		computed: {
			...mapState({
				list: state => state.user.list,
			})
		},
		methods: {
			jumpNew() {
				uni.navigateTo({
					url: this.add_url
				})
			},
			jumpEdit(item, index) {
				this.$store.dispatch('user/get_info', item)
				uni.navigateTo({
					url: this.edit_url + '?item.userid=' + item.userid
				})
			}
		},
		// vuex - 
		onShow() {
			// console.log(this.list,'list333333')
			// this.list.sort((a,b)=>{
			// 	return b.show - a.show;
			// })
		}
		

	}
</script>

<style scoped lang="scss">
.add_box{
	width: 100%;
	height: 100%;
	background-color: #FFF;
	
	.add_content{
		padding: 32rpx 24rpx;
		.change_card{
			margin-left: 47rpx;
			margin-bottom: 38rpx;
		}
		.add_card {
			padding-top: 6rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			border-bottom: #EFEFEF 1rpx solid;
			margin-bottom: 16rpx;
			.card_left {
				.card_left1 {
					display: flex;
					justify-content: flex-start;
					
					.card_phone {
						padding-left: 72rpx;
						color: #333;
					}
				}
				.card_left2 {
					display: flex;
					justify-content: flex-start;
		
					.card_type {
						color: #FF5445;
						font-size: 20rpx;
						padding: 32rpx 0 40rpx 8rpx;
					}
		
					.card_place {
						padding: 30rpx 0 0 104rpx;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		
			.card_right {
				image {
					height: 34rpx;
					width: 34rpx;
				}
			}
		
		}
		.add_bottom{
			position: fixed;
			right: 24rpx;
			bottom: 80rpx;
			left: 24rpx;
			height: 96rpx;
			background-color: #FF5445;
			border-radius: 16rpx;
			.bottom_text{
				font-size: 32rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				padding-top: 28rpx;
				letter-spacing: 2rpx;
			}
		}
	}
}
</style>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
